<!-- 
/* ************************************************************************
 *                        _oo0oo_
 *                       o8888888o
 *                       88" . "88
 *                       (| -_- |)
 *                       0\  =  /0
 *                     ___/`---'\___
 *                   .' \\|     |// '.
 *                  / \\|||  :  |||// \
 *                 / _||||| -:- |||||- \
 *                |   | \\\  - /// |   |
 *                | \_|  ''\---/''  |_/ |
 *                \  .-\__  '-'  ___/-. /
 *              ___'. .'  /--.--\  `. .'___
 *           ."" '<  `.___\_<|>_/___.' >' "".
 *          | | :  `- \`.;`\ _ /`;.`/ - ` : | |
 *          \  \ `_.   \_ __\ /__ _/   .-` /  /
 *      =====`-.____`.___ \_____/___.-`___.-'=====
 *                        `=---='
 * 
 * 
 ************************************************************************
 *		本代码已经过佛祖开光处理，佛祖保佑，永不宕机，永无BUG。
 *		文件名称：略
 *		简要描述：评价页面
 *		作   者：Frank
 *		创建日期：2023/12/12
 *		联系方式：邮箱: goodboybbc@outlook.com, 微信：goodboybbc 可提供后台源码(Node.js开发)和数据库(MySQL)

 *		Copyright(c)	2023-2033   Frank   本项目已取得软件著作权和备案，仅供学习研究。软件著作权登记号：软著登字第12572259号 备案号:川公网安备51012202001748 蜀ICP备2024058077号-1 
 ********************************修改记录********************************
		作	者			修改日期				修改内容 
		Frank			2023/12/12			创建文件
 *************************************************************************/	
 -->
<template>
	<view class="main">
		<view class="comment">
			<textarea class='comment-memo' v-model="memo" placeholder="输入评价内容~"/>
			<view class="img-box" @tap="onAddImg">
				<view v-if="imgPath == ''" class="img-box-add">+</view>
				<image v-else class="comment-img" :src="imgPath" mode=""></image>
			</view>
			<view class="comment-add" @tap="onComment">提交评价</view>
		</view>
	</view>
</template>

<script>
	import $http from '@/common/api/request.js'
	import utility from '@/common/utility.js'
	import { mapStores, mapActions, mapState } from 'pinia'
	import { userStore } from '@/store/modules/userStore.js'
	import { exchangeStore } from '@/store/modules/exchangeStore.js'	
	export default {
		data() {
			return {
				memo:'',
				imgPath:'',
				serverPath:'',
				comName:'',
				exchangeId:0
			}
		},
		computed:{
			...mapStores(userStore, exchangeStore)
		},	
		methods: {
			onAddImg(){
				console.log('onAddImg');
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: res => {
						this.imgPath = res.tempFilePaths[0];
						this.uploadImg();
					}
				});
			},
			uploadImg(){
				let imgUrl = utility.baseWeb + 'api/comment/add_img';
				console.log(imgUrl);
				uni.uploadFile({
					url: imgUrl, //开发者服务器 url
					header:{
						// HTTP 请求 Header, header 中不能设置 Referer
					},
					filePath: this.imgPath, // 要上传文件资源的路径
					name: 'file', // 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
					formData:{ 
						// HTTP 请求中其他额外的 form data （即接口需要的其它参数）
						'fileId':'1'
					},
					success: (res) => {
						let data = JSON.parse(res.data);
						this.serverPath = data.url;
						console.log('上传成功', this.serverPath);
					},
					fail: () => {
						console.log('失败', err);
					},
					complete: () => {
						console.log('结束');
					},
				})
			},
			onComment(){
				if(this.memo.length == 0) return;
				if(this.imgPath.length > 0 && this.serverPath.length == 0){
					uni.showToast({
						title:'图片正在上传中，请稍候!',
						icon:'none'
					});
					return;
				}
				
				$http.request({
					url:'comment/add_comment',
					token:true,
					data:{
						memo:this.memo,
						comName:this.comName,
						exchangeId:this.exchangeId,
						imgPath:this.serverPath,
						}
				}).then( res => {
					uni.showToast({
						title:'评价成功',
						icon:'none'
					});
					let commentId = res.data.commentId;
					this.exchangeStore.setCommentId(this.exchangeId, commentId);
					uni.navigateBack();
				}).catch( (e) => {
					uni.showToast({
						title:e,
						icon:'none'
					})
				});					
			}
		},
		onLoad(e) {
			this.exchangeId = parseInt(e.exchangeId);
			this.comName = e.comName;
		}
	}
</script>

<style scoped>
	.main{
		width: 100vw;
		height: 100vh;
		background-color: #F8F7F7;
	}
	.comment{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.comment-memo{
		width:680rpx;
		height: 300rpx;
		background-color: white;
		border-radius: 30rpx;
		padding: 32rpx;
	}
	.img-box{
		width: 150rpx;
		height: 150rpx;
		margin: 32rpx 0;
		border: 2rpx solid lightgray;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		left: -255rpx;
	}
	.img-box-add{
		color: lightgray;
		font-size: 64rpx;
		font-weight: bold;
	}
	.comment-img{
		width: 100%;
		height: 100%;
	}
	.comment-add{
		margin-top: 20rpx;
		width: 680rpx;
		height: 84rpx;
		background-color:mediumslateblue;
		border-radius: 40rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
	}
</style>
